<template>
  <div class="settings-page">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-card class="settings-card">
          <template #header>
            <h3>基本设置</h3>
          </template>
          
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="语言">
              <el-select v-model="basicSettings.language" placeholder="选择语言">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="主题">
              <el-radio-group v-model="basicSettings.theme">
                <el-radio label="light">浅色主题</el-radio>
                <el-radio label="dark">深色主题</el-radio>
                <el-radio label="auto">跟随系统</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="字体大小">
              <el-select v-model="basicSettings.fontSize" placeholder="选择字体大小">
                <el-option label="小" value="small" />
                <el-option label="中" value="medium" />
                <el-option label="大" value="large" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="自动刷新">
              <el-switch v-model="basicSettings.autoRefresh" />
              <span class="setting-description">启用后页面将自动刷新数据</span>
            </el-form-item>
            
            <el-form-item label="刷新间隔">
              <el-input-number
                v-model="basicSettings.refreshInterval"
                :min="5"
                :max="300"
                :disabled="!basicSettings.autoRefresh"
              />
              <span class="setting-description">秒</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 通知设置 -->
      <el-tab-pane label="通知设置" name="notification">
        <el-card class="settings-card">
          <template #header>
            <h3>通知设置</h3>
          </template>
          
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationSettings.emailNotification" />
            </el-form-item>
            
            <el-form-item label="微信通知">
              <el-switch v-model="notificationSettings.wechatNotification" />
            </el-form-item>
            
            <el-form-item label="系统通知">
              <el-switch v-model="notificationSettings.systemNotification" />
            </el-form-item>
            
            <el-form-item label="告警级别">
              <el-checkbox-group v-model="notificationSettings.alertLevels">
                <el-checkbox label="low">低</el-checkbox>
                <el-checkbox label="medium">中</el-checkbox>
                <el-checkbox label="high">高</el-checkbox>
                <el-checkbox label="critical">紧急</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="免打扰时间">
              <el-time-picker
                v-model="notificationSettings.quietStart"
                placeholder="开始时间"
                format="HH:mm"
              />
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="notificationSettings.quietEnd"
                placeholder="结束时间"
                format="HH:mm"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 数据设置 -->
      <el-tab-pane label="数据设置" name="data">
        <el-card class="settings-card">
          <template #header>
            <h3>数据设置</h3>
          </template>
          
          <el-form :model="dataSettings" label-width="120px">
            <el-form-item label="数据保留天数">
              <el-input-number
                v-model="dataSettings.dataRetentionDays"
                :min="1"
                :max="365"
              />
              <span class="setting-description">天</span>
            </el-form-item>
            
            <el-form-item label="数据压缩">
              <el-switch v-model="dataSettings.dataCompression" />
              <span class="setting-description">启用后数据将自动压缩存储</span>
            </el-form-item>
            
            <el-form-item label="备份频率">
              <el-select v-model="dataSettings.backupFrequency" placeholder="选择备份频率">
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="数据导出格式">
              <el-checkbox-group v-model="dataSettings.exportFormats">
                <el-checkbox label="csv">CSV</el-checkbox>
                <el-checkbox label="excel">Excel</el-checkbox>
                <el-checkbox label="json">JSON</el-checkbox>
                <el-checkbox label="pdf">PDF</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
      
      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-card class="settings-card">
          <template #header>
            <h3>安全设置</h3>
          </template>
          
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="登录验证">
              <el-switch v-model="securitySettings.twoFactorAuth" />
              <span class="setting-description">启用双因素认证</span>
            </el-form-item>
            
            <el-form-item label="会话超时">
              <el-input-number
                v-model="securitySettings.sessionTimeout"
                :min="5"
                :max="480"
              />
              <span class="setting-description">分钟</span>
            </el-form-item>
            
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="numbers">必须包含数字</el-checkbox>
                <el-checkbox label="symbols">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="登录历史">
              <el-switch v-model="securitySettings.loginHistory" />
              <span class="setting-description">记录登录历史</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 保存按钮 -->
    <div class="settings-actions">
      <el-button type="primary" @click="handleSave" :loading="saving">
        保存设置
      </el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')
const saving = ref(false)

// 基本设置
const basicSettings = reactive({
  language: 'zh-CN',
  theme: 'light',
  fontSize: 'medium',
  autoRefresh: true,
  refreshInterval: 30
})

// 通知设置
const notificationSettings = reactive({
  emailNotification: true,
  wechatNotification: true,
  systemNotification: true,
  alertLevels: ['medium', 'high', 'critical'],
  quietStart: null,
  quietEnd: null
})

// 数据设置
const dataSettings = reactive({
  dataRetentionDays: 90,
  dataCompression: true,
  backupFrequency: 'daily',
  exportFormats: ['csv', 'excel', 'json']
})

// 安全设置
const securitySettings = reactive({
  twoFactorAuth: false,
  sessionTimeout: 30,
  passwordPolicy: ['uppercase', 'lowercase', 'numbers'],
  loginHistory: true
})

// 保存设置
const handleSave = async () => {
  try {
    saving.value = true
    
    // 这里调用API保存设置
    await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟API调用
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('设置保存失败')
    console.error('保存设置失败:', error)
  } finally {
    saving.value = false
  }
}

// 重置设置
const handleReset = () => {
  // 重置所有设置到默认值
  Object.assign(basicSettings, {
    language: 'zh-CN',
    theme: 'light',
    fontSize: 'medium',
    autoRefresh: true,
    refreshInterval: 30
  })
  
  Object.assign(notificationSettings, {
    emailNotification: true,
    wechatNotification: true,
    systemNotification: true,
    alertLevels: ['medium', 'high', 'critical'],
    quietStart: null,
    quietEnd: null
  })
  
  Object.assign(dataSettings, {
    dataRetentionDays: 90,
    dataCompression: true,
    backupFrequency: 'daily',
    exportFormats: ['csv', 'excel', 'json']
  })
  
  Object.assign(securitySettings, {
    twoFactorAuth: false,
    sessionTimeout: 30,
    passwordPolicy: ['uppercase', 'lowercase', 'numbers'],
    loginHistory: true
  })
  
  ElMessage.info('设置已重置')
}
</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.settings-card h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.setting-description {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.time-separator {
  margin: 0 10px;
  color: #909399;
}

.settings-actions {
  margin-top: 20px;
  text-align: center;
}

:deep(.el-tabs__content) {
  padding: 20px;
}
</style> 